<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>

<body>
<div data-role="page">
    <header data-role="header" data-theme="b">
        <a href="#" data-rel="back"
           class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">Back</a>

        <h1>我的订单</h1>
    </header>
    <div data-role="content" class="content">
        <script src="../js/jquery/jquery.js"></script>
        <script type="text/javascript" src="../js/template/handlebars-v1.3.0.js"></script>
        <script src="../js/jquery/jquery.cookie.js"></script>
        <script id="item-template" type="text/x-handlebars-template">
            {{#each books}}
            <label>{{timestamp}}</label>
            <ul>
                {{#each item}}
                <li><a href="{{link}}">
                    <img src="../pic/book_list/{{img}}">

                    <h2>{{name}}</h2>

                    <p>{{money}}</p></a>
                    <span class="ui-li-count">{{count}}</span>
                </li>
                {{/each}}
            </ul>
            {{/each}}
        </script>
        <script>
            $(function () {

                $.getJSON("../json/books_list.json", function (data, status) {
                    var strJson = JSON.stringify(data);
                    var dataObj = eval("(" + strJson + ")");
                    var myTemplate = Handlebars.compile($("#item-template").html());
                    $("#swipeMe").append(myTemplate(dataObj));
                });

                $("#btn-buy").click(function () {
                    alert("支付页面正在设计!");
                });

                $("#btn-skim").attr("href", "product_list.html");
            });
        </script>
        <link rel="stylesheet" href="../css/jquery_mobile/jquery.mobile-1.4.2.css"/>
        <script src="../js/jquery_mobile/jquery.mobile-1.4.2.js"></script>

        <ul data-role="listview" data-inset="true" id="swipeMe">
        </ul>
        <a id="btn-buy" style="text-decoration: none">
            <button class="ui-btn ui-btn-b ui-shadow ui-corner-all ui-btn-icon-left ui-icon-check">确认购买</button>
        </a>
        <a id="btn-skim" style="text-decoration: none">
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-shop">返回浏览</button>
        </a>
    </div>
</div>
</body>
</html>